<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import "./assets/css/ajax.loading.less";
  @import "./assets/css/base.less";
  body {
    background-color: #fbf9fe;
  }
  .bottom-tab {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-box-align: center;
    position: fixed;
    z-index: 99;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    border-top: 1px solid #E1E1E1;
    background: #fff;
    .tab-item {
      width: 25%;
      text-align: center;

      span {
        display: block;
        font-size: 12px;
        color: #666;
        &.active {
           color: #04be02;
         }
      }
    }
  }
</style>
<template>
  <div>
    <div class="bottom-tab">
      <div class="tab-item" @click="tabSwitch(1)">
        <span>
          <img v-if="tab !== 1" src="./assets/images/new.png" width="23" height="23" alt="">
          <img v-if="tab === 1" src="./assets/images/new_ac.png" width="23" height="23" alt="">
        </span>
        <span :class="{'active':tab === 1}">新品</span>
      </div>
      <div class="tab-item" @click="tabSwitch(2)">
        <span>
          <img v-if="tab !== 2" src="./assets/images/icon_component.png" width="23" height="23" alt="">
          <img v-if="tab === 2" src="./assets/images/icon_component_HL.png" width="23" height="23" alt="">
        </span>
        <span :class="{'active':tab === 2}">全部</span>
      </div>
      <div class="tab-item" @click="tabSwitch(3)">
        <span>
          <img v-if="tab !== 3" src="./assets/images/ac.png" width="23" height="23" alt="">
          <img v-if="tab === 3" src="./assets/images/ac_ac.png" width="23" height="23" alt="">
        </span>
        <span :class="{'active':tab === 3}">活动</span>
      </div>
      <div class="tab-item" @click="tabSwitch(4)">
        <span>
          <img v-if="tab !== 4" src="./assets/images/my.png" width="23" height="23" alt="">
          <img v-if="tab === 4" src="./assets/images/my_ac.png" width="23" height="23" alt="">
        </span>
        <span :class="{'active':tab === 4}">我的</span>
      </div>
    </div>
    <router-view></router-view>
    <Toast  v-model="showToast" type="text" :text="toastConfig.msg" :width="toastConfig.width" @on-hide="hideToast"></Toast>
  </div>
</template>

<script>
  import { Toast } from 'vux'
  export default {
    components: {
      Toast
    },
    data () {
      return {
        tab: null
      }
    },
    computed: {

      showToast() {
          return this.$store.state.toast.isShow
      },
      toastConfig() {
          return this.$store.state.toast.config
      }
    },
    mounted() {
      this.tabSwitch(1);
    },
    methods: {

      hideToast() {
        this.$store.commit('HIDE_TOAST');
      },
      tabSwitch (tab) {
        switch(tab) {
          case 1:
                this.tab = 1;
                this.$router.push('new');
                break;
          case 2:
                this.tab = 2;
                this.$router.push('all');
                break;
          case 3:
                this.tab = 3;
                this.$router.push('activity');
                break;
          case 4:
                this.tab = 4;
                this.$router.push('my');
                break;
        }
      }
    }
  }
</script>


